<template>
	<!-- 频道主题视频介绍 -->
	<router-link class="channel-info" :to="{name: 'Channel', params: {id: info.id}}">
		<img :src="info.cover" />
		<div class="msg">
			<p>{{info.name}}</p>
			<span>{{info.archive_count}}个视频</span>
			<span>{{info.featured_count|conversion}}个精选视频</span>
		</div>
	</router-link>
</template>

<script>
export default{
	name: 'ChannelInfo',
	props:{
		info:{
			type: Object,
			required: true
		}
	},
	filters:{
		// 格式化数量
		conversion(val){
			if(val == undefined) return 0;
			if(val<10000) return val;
			let str = val.toString(),
					w = str.slice(0, -4),
					q = str.slice(-4, -3),
					point = q>0 ? '.'+q : ''
			return w + point + '万'
		}
	}
}
</script>

<style scoped lang="less">
.channel-info{
	width: 100%;
	height: 100%;
	img{
		width: 48px;
		height: 48px;
	}
	.msg{
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		p{
			display: flex;
			line-height: 20px;
			margin-bottom: 9.5px;
			font-size: 16px;
		}
		span{
			line-height: 18px;
			margin-right: 13.3px;
			font-size: 12px;
			color: var(--c9);
		}
	}
}
</style>
